<template>
  <view class="order-list-item">
    <view class="content" v-if="items.length > 0">
			
			<view class="order-item-card" >
				<view>
					<view class="order-item-header">
						<view class="order-item-header-left">订单号：{{order.number}} </view>
						<view class="order-item-header-right">{{ order.created_at }}</view>
					</view>
					<view v-for="item in items" :key="item.id">
						<view class="product">
						  <image class="cover" :src="item.sku_pic" ></image>
						  <view class="desc">
						    <view class="title">{{ item.product_title }}</view>
						    <view class="money">￥{{ item.total_amount }}</view>
						  </view>
						  
						</view>
					</view>
					<view class="total-amount">
					  <view class="fund">共{{order.items.length}}件 实付：￥{{ order.total_amount }}</view>
					  <!-- <view class="money"></view>
					  <view class="ship">（免运费）</view> -->
					   <order-operation-com :order="order"></order-operation-com>
					</view>
				</view>
				
			</view>
    </view>
  </view>
</template>

<script>
import LoadOrder from "mixins/LoadOrder"
import OrderOperationCom from "components/order/OrderOperationCom"

export default {
  name: "show",
  mixins: [LoadOrder],
  components: {OrderOperationCom},
  methods: {
    goToProduct(id) {
      uni.redirectTo({url: `/packs/pages/product/show?product_id=${id}`})
    }
  }
}
</script>

<style lang="scss" scoped>
.order-list-item {
  .content {
    padding: 0 20rpx;
    .product {
      display: flex;
     
	  margin-top:14rpx;
	  padding-bottom:20rpx;
	  border-bottom:2rpx solid #f2f2f2;
      .cover {
        width: 160rpx;
        height: 160rpx;
        margin-left: 26rpx;
		margin-right:18rpx;
      }
      .desc {
        width: 510rpx;
        font-size: 26rpx;
        color: #333;
		position:relative;
		 font-weight: 600;
        .title {
         
		  margin-top:22rpx;
        }
		.money{
			position:absolute;
			top:98rpx;
		}
      }
    }
    .total-amount {
      display: block;
      font-size: 26rpx;
	  height:96rpx;
	  line-height:96rpx;
	  overflow: hidden;
      .fund {
        font-weight: 800;
		margin-left:22rpx;
		float:left;
      }
     
    }
  }
}
.order-item-card{
	width: 100%;
	border: 1px #F5F5F5 solid;
	border-radius: 10rpx;
	margin: 20rpx auto;
	.order-item-header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top:18rpx;
		padding-bottom: 18rpx;
		border-bottom:2rpx solid #f2f2f2;
		.order-item-header-left{
			font-size: 26rpx;
			color: #333333;
			font-weight: 500;
			margin-left:22rpx;
		}
		.order-item-header-right{
			font-size: 24rpx;
			color: #333;
			font-weight: 500;
			margin-right:24rpx;
		}
	}
	
}
.button {
	float:right;
	width:146rpx;
	height: 52rpx;
	line-height: 50rpx;
	border: 1px #999 solid;
	border-radius: 1rpx;
	background-color: #FFFFFF;
	font-size: 26rpx;
	margin-right: 24rpx;
}
.button-yes{
	float:right;
	width:146rpx;
	height: 52rpx;
	line-height: 50rpx;
	border: 1px #D84C29 solid;
	border-radius: 1rpx;
	background-color: #D84C29;
	font-size: 26rpx;
	margin-right: 24rpx;
	color:#fff;
	
	
}
</style>